<template>
  <div class="member">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <header id="header" class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">账户管理</h1>
        </header>
        <div class="mui-content">
          <div class="userinfo">
            <span class="icon money userinfo-avatar" v-tap="{method:userSign}"></span>
            <div class="mui-row">
              <div class="mui-col-xs-6 mui-col-sm-6 base">
                <div class="userinfo-nickname">笑笑购物劵</div>
                <div class="userinfo-money">{{'￥'+ (userInfo.balance_fee||'0.00')}}</div>
              </div>
              <div class="mui-col-xs-6 mui-col-sm-6">
                <div class="userinfo-nickname">签到购物劵</div>
                <div class="userinfo-money">{{'￥'+ (userInfo.sign_fee||'0.00')}}</div>
              </div>
            </div>
          </div>
          <div style="height:0.2rem;background: #eee;width:100%;"></div>
          <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" v-tap="{method:showQRcode}">
              <a>
                <svg class="mui-icon icon" aria-hidden="true">
                  <use xlink:href="#icon-erweima"></use>
                </svg>
                <div class="mui-media-body">收款码</div>
              </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
              <router-link to="/paymentLog">
                <svg class="mui-icon icon" aria-hidden="true">
                  <use xlink:href="#icon-mingxi"></use>
                </svg>
                <div class="mui-media-body">账目明细</div>
              </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
              <router-link to="/accounts">
                <svg class="mui-icon icon" aria-hidden="true">
                  <use xlink:href="#icon-yinhangqia"></use>
                </svg>
                <div class="mui-media-body">银行卡</div>
              </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" v-if="userInfo.user_level_id=='1'">
              <router-link to="/xiaoxiao">
                <svg class="mui-icon icon" aria-hidden="true">
                  <use xlink:href="#icon-baoxiang1"></use>
                </svg>
                <div class="mui-media-body">笑笑宝</div>
              </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" v-if="userInfo.user_level_id=='2'">
              <router-link to="/drawings">
                <svg class="mui-icon icon" aria-hidden="true">
                  <use xlink:href="#icon-baoxiang1"></use>
                </svg>
                <div class="mui-media-body">笑笑宝</div>
              </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" v-tap="{method:selectPayType}" v-if="userInfo.user_level_id=='1'">
              <a>
                <svg class="mui-icon icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanzhang"></use>
                </svg>
                <div class="mui-media-body">转账</div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
      <!-- 可选择菜单 -->
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <a v-tap="{method:paymentByPhone}">手机号转账</a>
        </li>
        <li class="mui-table-view-cell" v-if="isApp">
          <a v-tap="{method:paymentByScan}">扫码转账</a>
        </li>
      </ul>
      <!-- 取消菜单 -->
      <ul class="mui-table-view">
        <li class="mui-table-view-cell">
          <a href="#sheet1"><b>取消</b></a>
        </li>
      </ul>
    </div>
    <div class="mui-backdrop" v-show="showQR" v-tap="{method:hideQR}">
      <div id="qrcode" ref="qrCodeUrl"></div>
    </div>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  export default {
    data(){
      return{
        userInfo:{
          balance_fee:'0.00',
          sign_fee:'0.00',
          sign_time:'',
          mobile:'',
        },
        disableSign:true,
        showQR:false,
        isApp:false,
      }
    },
    created(){
      var that = this;
      that.getUserInfo();
      mui.plusReady(function() {
        that.isApp=true;
      });
    },
    mounted(){
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005
      });
    },
    methods:{
      userSign(){
        var that = this;
        if(that.userInfo.user_level_id==3){return;}
        if(that.disableSign){mui.toast("请稍等");return;}
        if(!that.userInfo.balance_fee||that.userInfo.balance_fee<100){mui.alert("需要100以上笑笑购物券才能签到");return;}
        var start=new Date();start.setHours(0);start.setMinutes(0);start.setSeconds(0);start.setMilliseconds(0);
        var todayStartTime=Date.parse(start);
        if(that.userInfo.sign_time>=todayStartTime){mui.alert("每天只能签到一次");return;}
        that.$http({url: that.$http.adornUrl(that.$api.userSign),method:'get',params:that.$http.adornParams()})
          .then(function(res){
            mui.toast(res.errmsg);
            if(res.errno==0){
              that.userInfo = res.data;
            }
          })
          .catch(function (err) {
            console.log("错误提示:",err);
          })
      },
      getUserInfo(){
        var that = this;
        that.$http({url: that.$http.adornUrl(that.$api.ShopUser),method:'get',params:that.$http.adornParams()})
          .then(function(res){
            if(res.errno==0){
              that.userInfo = res.data;
              that.$store.commit('user/updateUserInfo',res.data);
              that.disableSign = false;
              let qrcode = new QRCode(that.$refs.qrCodeUrl,{
                width: 180,
                height: 180, // 高度
                text: res.data.mobile, // 二维码内容
              })
            }
          })
          .catch(function (err) {
            console.log("错误提示:",err);
          })
      },
      showQRcode(){
        this.showQR=true;
      },
      hideQR(){
        this.showQR=false;
      },
      selectPayType(){
        mui('#sheet1').popover('toggle');
      },
      paymentByPhone(){
        this.selectPayType();
        this.$router.push('/payment');
      },
      paymentByScan(){
        var that = this;
        that.selectPayType();
        that.$router.push('/scan');
      },
    },
  }
</script>

<style scoped lang="less">
  .member{
    background: #f4f4f4;
    height: auto;
    overflow: hidden;
    width: 100%;
    .mui-bar{
      background-color: #fff;
      .mui-title{
        font-size: 0.36rem;
      }
    }
    .mui-bar-nav {
      -webkit-box-shadow: 0 1px 6px #e6e6e6;
      box-shadow: 0 1px 6px #e6e6e6;
    }
    .mui-input-group:after{
      height: 0px;
    }
    .mui-input-group:before{
      height: 0;
    }
    .mui-input-group .mui-input-row:after{
      height: 0px;
    }
    .mui-content{
      .userinfo {
        text-align: center;
        display: flex;
        flex-direction: column;
        padding: 0.3rem 0 0 0;
        align-items: stretch;
        background: #fff;
        width: 100%;
        .userinfo-avatar {
          width: 1.6rem;
          height: 1.6rem;
          margin: 0.6rem auto;
          border-radius: 50%;
          background: url(https://hahanongjiang.oss-cn-qingdao.aliyuncs.com/yixiaoguoji/icon/qiandao.png)  0 0 no-repeat;
          background-size: 1.6rem;
        }
        .mui-row{
          border-top:1px solid rgba(0,0,0,.15);
          .base{
            border-right:1px solid rgba(0,0,0,.15);
          }
          .userinfo-nickname {
            font-size:0.3rem;
            padding:0.1rem 0;
            color: #000;
          }
          .userinfo-money {
            font-size:0.4rem;
            line-height:0.5rem;
          }
        }
      }
      .mui-grid-view.mui-grid-9{
        border-top: 0;
        border-left: 0;
        .mui-table-view-cell{
          background-color: #fff;
          .mui-media-body{
            font-size: 0.2rem;
          }
        }
        .mui-media{
          .mui-icon{
            font-size: 0.7rem;
          }
        }
      }
    }
    #qrcode{
      width:4rem;
      height:4rem;
      margin:50% auto;
    }
  }
</style>
